<template>
    <el-card shadow="never">
        <el-scrollbar>
            <div class="statement_quantity_box disFix">
                <div v-if="type === 2" class="num_box">
                    <div class="title disFix">
                        关注粉丝数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="通过此活动关注公众号的粉丝数（包含取关粉丝数）">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.follow_fan_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        参与客户数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="进入活动并加好友的人数（包含已删除好友）">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.participate_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        分享人数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="参与用户生成海报的人数。只要生成过一次海报就算分享">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.share_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        完成客户数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="完成此裂变活动所有阶段任务的客户数量">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.finish_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        领奖人数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="已经领到奖并核销的客户数。只要领过一次奖励的都包涵在内。">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.receive_prize_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        助力人数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="参与者的有效助力成功的人数（不包含在活动有效期内删除好友的助力人）">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.help_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        获客数量
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="通过该活动添加企业员工好友的客户数量（包括已删除的好友的客户）">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.guest_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        流失客户数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="通过活动添加好友后又删除好友的客户数">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.lost_num) }}</div>
                </div>
                <div class="num_box">
                    <div class="title disFix">
                        客户留存率
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="[(获客数量-流失客户数)*100%]/获客数量">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ mid.retain }}%</div>
                </div>
                <div v-if="type === 2" class="num_box">
                    <div class="title disFix">
                        取关粉丝数
                        <el-popover
                            effect="dark"
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="通过此活动关注的公众号粉丝又取消关注的数量">
                            <template #reference>
                                <el-icon><InfoFilled color="#E3E3E3" /></el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="num">{{ numFormat(mid.un_follow_fan_num) }}</div>
                </div>
            </div>
        </el-scrollbar>
    </el-card>
</template>

<script setup lang="ts">
import { numFormat } from '@/utils/utils';
import { withDefaults, defineProps } from 'vue';
interface Props {
    mid: any;
    type: any;
}
withDefaults(defineProps<Props>(), {
    mid: () => {
        return {
            follow_fan_num: 0,
            un_follow_fan_num: 0,
            participate_num: 0,
            share_num: 0,
            lost_num: 0,
            finish_num: 0,
            receive_prize_num: 0,
            help_num: 0,
            guest_num: 0,
            retain: 0
        };
    },
    type: null
});
</script>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 16px;
}

:deep(.el-scrollbar) {
    width: 100%;
}

:deep(.el-card__body) {
    display: flex;
    justify-content: space-around;
    padding: 0;

    .num_box {
        min-width: 100px;

        .title {
            padding-bottom: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .num {
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }
}

.statement_quantity_box {
    padding: 32px 24px;
    box-sizing: border-box;
    width: 100%;
    justify-content: space-around;
}

.disFix {
    display: flex;
    align-items: center;
}
</style>
